二。分页
"""page.py 自定义分页使用方法：from utils.page import Paginationdef users(request): current_page = int(request.GET.get('page',1)) total_item_count = models.UserInfo.objects.all().count() page_obj = Pagination(current_page,total_item_count,'/users.html') user_list = models.UserInfo.objects.all()[page_obj.start:page_obj.end] return render(request,'users.html',{'user_list':user_list,'page_html':page_obj.page_html()})"""from django.utils.safestring import mark_safeclass Pagination(object): def __init__(self,current_page,total_item_count,base_url=None,per_page_count=10,show_pager_count=11): """ :param current_page: 当前页 :param total_item_count: 数据库数据总条数 :param base_url: 分页前缀URL :param per_page_count: 每页显示数据条数 :param show_pager_count: 显示的页码数 """ try: current_page = int(current_page) except Exception as e: current_page = 1 self.current_page = current_page #当前页 self.total_item_count = total_item_count #数据库数据总条数 self.base_url = base_url #分页前缀URL self.per_page_count = per_page_count #每页显示数据条数 self.show_pager_count = show_pager_count #对多显示的页码 max_pager_num, b = divmod(total_item_count, per_page_count) #获取总页数及余数（有余数总页数加一） if b: max_pager_num += 1 self.max_pager_num = max_pager_num #初始化总页数 @property #定义开始数据函数，返回开始的条数 def start(self): """ :return: """ return (self.current_page-1)* self.per_page_count #当前页减一 * 每页显示的数据条数 @property #定义结束数据函数，返回结束的条数 def end(self): """ :return: """ return self.current_page * self.per_page_count #返回 当前页 * 每页显示的数据条数 #取到页码标签列表 def page_html(self): """ :return: """ page_list = [] # 处理上一页标签开始 if self.current_page == 1: #如果当前页为第一页 prev = '
#cmdb分页的两种方式 page.py 下的 class Pagination(object): ..... def page_html_js(self): page_list = [] if self.current_page == 1: #如果当前页为第一页 prev = '
三。组合搜索
1 #views.py 2 3 import json 4 from django.shortcuts import render,HttpResponse 5 from django.http import JsonResponse 6 from repository import models 7 from utils.page import Pagination 8 9 def server(request): 10 return render(request,'server.html') 11 12 def server_json(request): 13 14 search_config = [ #定义搜索配置 15 { 'name': 'server_status_id', 'title': '服务器状态', 'type': 'select', 'choice_name': 'status_choices'}, 16 { 'name': 'hostname','title':'主机名','type':'input'}, 17 { 'name': 'cabinet_num', 'title': "机柜号", 'type': 'input'}, 18 19 ] 20 21 table_config = [ 22 { 23 'q': None, 24 "display": True, 25 'title': '选择', 26 'text': { 'tpl':'','kwargs':{ 'nid': '@id' }}, 27 'attr':{ 'class':'c1','nid':'@id'}, 28 29 }, 30 { 31 'q': 'id', 32 "display": False, 33 'title': 'ID', 34 'text': { 'tpl': '{a1}', 'kwargs': { 'a1': '@id'}}, 35 'attr': {}, 36 }, 37 { 38 'q': 'hostname', 39 "display": True, 40 'title': '主机名', 41 'text': { 'tpl': '{a1}-{a2}','kwargs':{ 'a1': '@hostname','a2':'666'}}, 42 'attr': { 'class': 'c1'}, 43 }, 44 { 45 'q': 'sn', 46 'title': '序列号', 47 "display": True, 48 'text': { 'tpl': '{a1}','kwargs':{ 'a1': '@sn'}}, 49 'attr': { 'class': 'c1'}, 50 }, 51 { 52 'q': 'os_platform', 53 'title': '系统', 54 "display": True, 55 'text': { 'tpl': '{a1}','kwargs':{ 'a1': '@os_platform'}}, 56 'attr': { 'class': 'c1'}, 57 }, 58 { 59 'q': 'os_version', 60 "display": True, 61 'title': '系统版本', 62 'text': { 'tpl': '{a1}','kwargs':{ 'a1': '@os_version'}}, 63 'attr': { 'class': 'c1'}, 64 }, 65 { 66 'q': 'business_unit__name', 67 "display": True, 68 'title': '业务线', 69 'text': { 'tpl': '{a1}','kwargs':{ 'a1': '@business_unit__name'}}, 70 'attr': { 'class': 'c1'}, 71 }, 72 { 73 'q': 'server_status_id', 74 "display": True, 75 'title': '服务器状态', 76 'text': { 'tpl': '{a1}', 'kwargs': { 'a1': '@@status_choices'}}, 77 'attr': { 'class': 'c1'}, 78 }, 79 { 80 'q': None, 81 "display": True, 82 'title': '操作', 83 'text': { 'tpl': '编辑 | 删除 ', 'kwargs': { 'nid': '@id','uid': '@id'}}, 84 'attr': {}, 85 }, 86 ] 87 88 values = [] 89 for item in table_config: 90 if item['q']: 91 values.append(item['q']) 92 93 # 获取用户请求的页码 94 current_page = request.GET.get('pageNum') 95 total_item_count = models.Server.objects.all().count() 96 #每页显示两条 97 page_obj = Pagination(current_page, total_item_count,per_page_count=2) 98 99 server_list = models.Server.objects.values(*values)[page_obj.start:page_obj.end]100 101 """102 [103 {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'},104 {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'},105 {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'},106 {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'},107 {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'},108 ]109 110 """111 response = {112 'search_config':search_config, #发送搜索配置113 'data_list': list(server_list),114 'table_config': table_config,115 'global_choices_dict':{116 'status_choices': models.Server.server_status_choices117 },118 'page_html': page_obj.page_html_js()119 }120 121 return JsonResponse(response)122 123 124 125 def disk(request):126 return render(request,'disk.html')127 128 def disk_json(request):129 table_config = [130 {131 'q': None,132 'title': '选择',133 'text': { 'tpl': '', 'kwargs': { 'nid': '@id'}},134 },135 {136 'q': 'id',137 'title': 'ID',138 'text': { 'tpl': '{nid}', 'kwargs': { 'nid': '@id'}},139 },140 {141 'q': 'slot',142 'title': '槽位',143 'text': { 'tpl': '{nid}', 'kwargs': { 'nid': '@slot'}},144 },145 ]146 147 values = []148 for item in table_config:149 if item['q']:150 values.append(item['q'])151 server_list = models.Disk.objects.values(*values)152 response = {153 'data_list': list(server_list),154 'table_config': table_config155 }156 157 return JsonResponse(response)158 159 160 161 def xxxxx(server_list):162 # [{},{}]163 for row in server_list:164 for item in models.Server.server_status_choices:165 if item[0] == row['server_status_id']:166 row['server_status_id_name'] = item[1]167 break168 yield row169 170 171 172 def test(request):173 """174 赠送，模板语言显示choice175 :param request:176 :return:177 """178 # server_list = models.Server.objects.all()179 # for row in server_list:180 # print(row.id,row.hostname,row.business_unit.name,"===",row.server_status_id,row.get_server_status_id_display() )181 182 # server_list = models.Server.objects.all().values('hostname','server_status_id')183 # for row in server_list:184 # for item in models.Server.server_status_choices:185 # if item[0] == row['server_status_id']:186 # row['server_status_id_name'] = item[1]187 # break188 189 data_list = models.Server.objects.all().values('hostname', 'server_status_id')190 191 return render(request,'test.html',{ 'server_list':xxxxx(data_list)}) /** * nb-list.js */(function (jq) { var requestUrl = ""; var GLOBAL_CHOICES_DICT = { // 'status_choices': [[0,'xxx'],] // 'xxxx_choices': [[0,'xxx'],] }; function csrfSafeMethod(method) { //！定义csrf函数 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); //? } $.ajaxSetup({ beforeSend: function (xhr, settings) { //请求头中设置一次csrf-token if (!csrfSafeMethod(settings.type)) { xhr.setRequestHeader('X-CSRFToken', $.cookie('csrftoken')); } } }); function getChoiceNameById(choice_name, id) { var val; var status_choices_list = GLOBAL_CHOICES_DICT[choice_name]; $.each(status_choices_list, function (kkkk, vvvv) { if (id == vvvv[0]) { val = vvvv[1]; } }); return val; } String.prototype.format = function (args) { return this.replace(/\{(\w+)\}/g, function (s, i) { return args[i]; }); }; /* 像后台获取数据 */ function init(pageNum) { $('#loading').removeClass('hide'); var condition = getSearchCondition(); //初始化获取搜索条件 $.ajax({ url: requestUrl, type: 'GET', data: { 'pageNum': pageNum, 'condition': JSON.stringify(condition)}, //? dataType: 'JSON', success: function (response) { /* 处理choice */ GLOBAL_CHOICES_DICT = response.global_choices_dict; /* 处理搜索条件 */ initSearchCondition(response.search_config); /* 处理表头 */ initTableHead(response.table_config); /* 处理表内容 */ initTableBody(response.data_list, response.table_config); /* 处理表分页 */ initPageHtml(response.page_html); $('#loading').addClass('hide'); }, error: function () { $('#loading').addClass('hide'); } }) } /* 绑定搜索条件事件 */ function bindSearchConditionEvent() { // 改变下拉框内容时 $('#searchCondition').on('click', 'li', function () { //? // $(this) = li标签 // 找到文本修改 $(this).parent().prev().prev().text($(this).text()); // 找input标签，修改，重建 $(this).parent().parent().next().remove(); var name = $(this).find('a').attr('name'); var type = $(this).find('a').attr('type'); if (type == 'select') { var choice_name = $(this).find('a').attr('choice_name'); // 作业：生成下拉框， var tag = document.createElement('select'); tag.className = "form-control no-radius"; tag.setAttribute('name', name); $.each(GLOBAL_CHOICES_DICT[choice_name], function (i, item) { var op = document.createElement('option'); op.innerHTML = item[1]; op.setAttribute('value', item[0]); $(tag).append(op); }) } else { // var tag = document.createElement('input'); tag.setAttribute('type', 'text'); //设置'type属性'为‘text' // $(tag).addClass('form-control no-radius') tag.className = "form-control no-radius"; tag.setAttribute('placeholder', '请输入条件'); tag.setAttribute('name', name); } $(this).parent().parent().after(tag); }); // 添加搜索条件 $('#searchCondition .add-condition').click(function () { //当单价添加条件按钮时触发以下函数 var $condition = $(this).parent().parent().clone(); // 条件对象 = 当前按钮父亲的父亲的克隆 $condition.find('.add-condition').removeClass('add-condition').addClass('del-condition').find('i').attr('class', 'fa fa-minus-square'); //? $condition.appendTo($('#searchCondition')); //? }); // 删除搜索条件 $('#searchCondition').on('click', '.del-condition', function () { $(this).parent().parent().remove(); }); //点击搜索按钮 $('#doSearch').click(function () { init(1); }) } function initSearchCondition(searchConfig) { if (!$('#searchCondition').attr('init')) { // 找到页面上的搜索条件标签 // 根据searchConfig生成li var $ul = $('#searchCondition :first').find('ul'); $ul.empty(); initDefaultSearchCondition(searchConfig[0]); $.each(searchConfig, function (i, item) { var li = document.createElement('li'); var a = document.createElement('a'); a.innerHTML = item.title; a.setAttribute('name', item.name); a.setAttribute('type', item.type); if (item.type == 'select') { a.setAttribute('choice_name', item.choice_name); } $(li).append(a); $ul.append(li); }); $('#searchCondition').attr('init', 'true'); } } function initDefaultSearchCondition(item) { // item={'name': 'hostname','title':'主机名','type':'input'}, if (item.type == 'input') { var tag = document.createElement('input'); tag.setAttribute('type','text'); //？ 设置标签属性'type'='text' // $(tag).addClass('form-control no-radius') tag.className = "form-control no-radius"; tag.setAttribute('placeholder', '请输入条件'); tag.setAttribute('name', item.name); } else { var tag = document.createElement('select'); tag.className = "form-control no-radius"; tag.setAttribute('name',item.name); //? 设置标签属性name为 $.each(GLOBAL_CHOICES_DICT[item.choice_name], function (i, row) { var op = document.createElement('option'); op.innerHTML = row[1]; op.setAttribute('value', row[0]); $(tag).append(op); }) } $('#searchCondition').find('.input-group').append(tag); $('#searchCondition').find('.input-group label').text(item.title); } function getSearchCondition() { var result = {}; $('#searchCondition').find('input[type="text"],select').each(function(){ var name = $(this).attr('name'); var val = $(this).val(); if(result[name]){ result[name].push(val); }else{ result[name] = [val ]; } }); return result; } function initPageHtml(page_html) { $('#pagination').empty().append(page_html); } function initTableHead(table_config) { /* table_config = [ { 'q': 'hostname', 'title': '主机名', }, { 'q': 'sn', 'title': '序列号', }, { 'q': 'os_platform', 'title': '系统', }, ] */ $('#tHead tr').empty(); $.each(table_config, function (k, conf) { if (conf.display) { var th = document.createElement('th'); th.innerHTML = conf.title; $('#tHead tr').append(th); } }); } function initTableBody(data_list, table_config) { /* [ {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'}, {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'}, {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'}, {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'}, {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'}, ] */ $('#tBody').empty(); $.each(data_list, function (k, row_dict) { // 循环数据库中获取到的每行数据 // row_dict = {'hostname':'xx', 'sn':'xx', 'os_platform':'xxx'}, var tr = document.createElement('tr'); $.each(table_config, function (kk, vv) { if (vv.display) { var td = document.createElement('td'); /* 处理Td内容 */ var format_dict = {}; $.each(vv.text.kwargs, function (kkk, vvv) { if (vvv.substring(0, 2) == "@@") { var name = vvv.substring(2, vvv.length); // status_choices var val = getChoiceNameById(name, row_dict[vv.q]); format_dict[kkk] = val; } else if (vvv[0] == "@") { var name = vvv.substring(1, vvv.length); format_dict[kkk] = row_dict[name]; } else { format_dict[kkk] = vvv; } }); td.innerHTML = vv.text.tpl.format(format_dict); /* 处理Td属性 */ $.each(vv.attr, function (attrName, attrVal) { if (attrVal[0] == "@") { attrVal = row_dict[attrVal.substring(1, attrVal.length)] } td.setAttribute(attrName, attrVal); }); $(tr).append(td); } }); $('#tBody').append(tr); }) } jq.extend({ "nBList": function (url) { requestUrl = url; init(1); bindSearchConditionEvent(); //执行绑定搜索条件函数 }, "changePage": function (pageNum) { init(pageNum); } });})(jQuery);